<template>
    <canvas id="background-canvas" width="1600" height="1000"
        style="border:1px solid #000000;position: absolute;top: 0;left: 0;z-index:0"></canvas>
    <canvas id="main-canvas" width="1600" height="1000"
        style="border:1px solid #000000;position: absolute;top: 0;left: 0;z-index:100"></canvas>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import { RailsCanvasMgr } from './tracks_canvas/rails_canvas_mgr';
import { Line } from '@/algorithms/curves';
import { LineTrack } from './tracks_canvas/track_shapes';
import { getTopology } from '@/requests';

let points: { x: number, y: number }[] = []
let ctx: CanvasRenderingContext2D | null = null
let intervalID = -1
let position = 0
let widthSet = false

const canvasData = {
    railsCanvasMgr: null as RailsCanvasMgr | null
}
onMounted(() => {
    func()
    getTopology().then((res) => {
        console.log(res)
        res.track_shapes.forEach((trackShape) => {

            trackShape.shapes.shapes.forEach((shape, index) => {
                console.log(shape)
                const line = new LineTrack({ x: shape.start_pos[0], y: shape.start_pos[1] },
                    { dx: shape.end_pos[0] - shape.start_pos[0], dy: shape.end_pos[1] - shape.start_pos[1] })
                line.draw(canvasData.railsCanvasMgr!)
                if (index == 0) {
                    const upPosition = trackShape.shapes.semaphore_up_position
                    canvasData.railsCanvasMgr!.drawCircle({ x: upPosition[0], y: upPosition[1] }, 5, {})
                }
                if (index == (trackShape.shapes.shapes.length - 1)) {
                    const downPosition = trackShape.shapes.semaphore_down_position
                    canvasData.railsCanvasMgr!.drawCircle({ x: downPosition[0], y: downPosition[1] }, 5, {})
                }
            })
        })
    })
})








function func() {
    // 获取canvas元素
    const canvas: HTMLCanvasElement = document.getElementById('background-canvas') as HTMLCanvasElement;
    ctx = canvas.getContext('2d')!;
    ctx.imageSmoothingEnabled = true;
    // const devicePixelRatio = window.devicePixelRatio || 1;
    // 设置高清画布
    // canvas.width = canvas.clientWidth * devicePixelRatio;
    // canvas.height = canvas.clientHeight * devicePixelRatio;
    // ctx.scale(devicePixelRatio, devicePixelRatio);

    canvasData.railsCanvasMgr = new RailsCanvasMgr(canvas)
    // const line = new LineTrack({ x: 100, y: 100 }, { dx: 200, dy: 50 })
    // line.draw(canvasData.railsCanvasMgr,)
    // const line2 = new LineTrack(line.getEndPoint(), { dx: 100, dy: 0 })
    // line2.draw(canvasData.railsCanvasMgr)
}

</script>